<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1892202_vz0dyjhocgo.css">
    <link rel="stylesheet" href="/css/list.css">
</head>
<body>
    <!-- 头部 共用 -->
    <header></header>
    <!-- 选项卡 -->
    <div class="content">
        <!-- <div class="con-1">
            <h2>你经常用手机做什么呢</h2>
            <div>
            <p><input type="radio"> 拍照</p>
            <p><input type="radio"> 拍视屏</p>
            <p><input type="radio"> 玩游戏</p>
            </div> 
        </div> -->
        <div class="con-2">
            <img src="/img/list-1.jpg" alt="">
            <img src="/img/llist-2.jpg" alt="">
            <img src="/img/list-3.jpg" alt="">
        </div>
    </div>



    <!-- 商品展示 -->
    <div class="list">
        <div class="list-1 ">           
                    <p>手机</p>
                    
                    <li class="upBtn">按价格升序</li>
                    <li class="downBtn">按价格降序</li>
                   
        </div>
        <!-- list2 -->
        <div class="list-2">
            <ul id="shopList">
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div class="price"></div>

                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="shopprice">
                  
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
                <li>
                    <img src="/img/sj1.png" alt="">
                    <div class="btn">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                    <h3>荣耀Play4</h3>
                    <h4>超级玩家 天生敢造</h4>
                    <p><a href="">了解更多</a></p>
                    
                    
                </li>
            </ul> 
            <script type="text/html" id="shopTemplate">
                  {{each list item}}
                <li>    <a href="/html/shopping.html?id={{item.id}}">
                    <img src="{{item.src}}" alt="">
                        <div class="shoppprice">
                            ￥{{item.price}}
                        </div>
                        <!-- <img src="{{item.src}}" alt=""> -->
                         <h3>{{item.title}}</h3>
                         <h4>{{item.content}}</h4>
                        <p>了解更多</p>
                    </a>
                </li>
                {{/each}}
            </script>   
        </div>
    </div>
    <!-- 尾部 -->
    <footer></footer>
</body>
<script src="/libs/require/require.min.js" data-main="/js/list"></script>
</html>